<template>
    <div class="child">
        <h2>Child组件</h2>
        <h3>当前求和为: {{ sum }}</h3>
    </div>
</template>

<script setup lang="ts" name="Modal">
import { ref } from "vue"
import axios from "axios"
const uri = 'https://api.uomg.com/api/rand.qinghua?format=json'
let sum = ref(0)
// await 异步任务会导致Child组件无法在父组件中显示出来,需要在父组件中为Child组件包裹Suspense
let { data } = await axios.get("http://localhost:5173/api/api/SweetNothings")
console.log(data)
</script>


<style scoped>
.child {
    background-color: skyblue;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    padding: 10px;
}

button {
    margin: 0 5px;
}
</style>